<template>
	<div class="page">
		<div class="top">
			<el-form ref="form" :inline="true" :model="form" label-width="80px">
				<el-form-item label="搜索内容">
					<el-input v-model="form.role_name" size="large" clearable @clear="getList(1)"
						class="input"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="large" @click="getList(1)">搜索</el-button>
				</el-form-item>
			</el-form>
			<div>
				<el-button type="primary" @click="add">添加角色</el-button>
			</div>
		</div>
		<el-table :data="tableData" class="table" row-key="id" border :load="load" v-loading="loading">
			<el-table-column prop="role_id" label="ID" width="80" align="center" />
			<el-table-column prop="role_name" label="角色名称" />
			<el-table-column prop="created_at" label="创建时间" />
			<el-table-column prop="updated_at" label="修改时间" />
			<el-table-column label="操作" fixed="right" width="180" align="center">
				<template #default="{row,$index}">
					<el-link type="success" :underline="false" @click="edit(row)">编辑</el-link>
					<el-link type="danger" :underline="false" @click="remove(row)"
						style="margin-left: 12px;">删除</el-link>
					<el-link type="warning" :underline="false" @click="menu(row)"
						style="margin-left: 12px;">权限编辑</el-link>
				</template>
			</el-table-column>
		</el-table>

		<div class="pagination">
			<el-pagination @size-change="sizeChange" @current-change="getList" :current-page="form.page"
				:page-sizes="[20, 50, 100, 200]" :page-size="form.size" layout="total, sizes, prev, pager, next, jumper"
				:total="count">
			</el-pagination>
		</div>




		<el-drawer v-model="drawer" size="60%" direction="rtl">
			<template #header>
				<h4>权限编辑-{{editForm.role_name}}</h4>
			</template>
			<template #default>

				<el-form :model="editForm" label-width="auto" style="max-width: 600px">
					<el-form-item label="角色权限">
						<el-tree ref="tree" style="max-width: 600px" :data="roleList" node-key="menu_id"
							:default-checked-keys="editForm.role_ids" show-checkbox @check-change="handleCheckChange" />
					</el-form-item>
				</el-form>

			</template>
			<template #footer>
				<div style="flex: auto">
					<el-button type="success" @click="editRole">修改</el-button>
				</div>
			</template>
		</el-drawer>




	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				count: 0,
				form: {
					page: 1,
					siez: 20,
					role_name: ''
				},
				drawer: false,
				editForm: {},
				inputVisible: false,
				inputValue: '',
				loading: false,
				roleList: []
			}
		},
		created() {
			this.getList();
			this.getRole();
		},
		methods: {
			sizeChange(size){
				this.form.size = size;
				this.getList(1)
			},
			menu(item) {
				this.editForm = {
					role_ids: item.role_ids,
					role_id: item.role_id
				}
				this.drawer = true;
			},
			getRole() {
				if (this.roleList.length == 0) {
					this.$request.admin.getMenuListByTreeList().then(res => {
						if (res&&res.data.code == 200) {
							this.roleList = res.data.content.data.map(item => {
								let itemList = item.treeList.map(t => {
									let treeList = t.treeList.map(T => {
										return {
											menu_id: Number(T.menu_id),
											parent_id: T.parent_id,
											label: T.title
										}
									})
									return {
										menu_id: Number(t.menu_id),
										parent_id: t.parent_id,
										label: t.title,
										children: treeList
									}
								})
								return {
									menu_id: Number(item.menu_id),
									parent_id: item.parent_id,
									label: item.title,
									children: itemList
								}
							})
						}
					})
				}
			},
			remove(item) {
				this.$confirm('确定删除此角色？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}).then(res => {
					this.$request.admin.roleInfoDelete({
						role_id: item.role_id
					}).then(res => {
						if (res&&res.data.code == 200) {
							this.$message.success('删除成功');
							this.getList();
						}
					})
				}).catch(() => {});
			},
			edit(item) {
				this.$prompt('请输入您要修改的角色名称', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /^.+$/,
					inputErrorMessage: '请输入角色名称',
					inputValue: item.role_name
				}).then(({
					value
				}) => {
					if (value) {
						this.$request.admin.roleInfoEdit({
							role_name: value,
							role_id: item.role_id
						}).then(res => {
							if (res&&res.data.code == 200) {
								this.$message.success('修改成功');
								this.getList();
							}
						})
					} else {
						this.$message({
							type: 'info',
							message: '请输入角色名称'
						});
					}
				}).catch(() => {});
			},
			add() {
				this.$prompt('请输入您要添加的角色名称', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /^.+$/,
					inputErrorMessage: '请输入角色名称'
				}).then(({
					value
				}) => {
					if (value) {
						this.$request.admin.roleInfoCreate({
							role_name: value
						}).then(res => {
							if (res&&res.data.code == 200) {
								this.$message.success('添加成功');
								this.getList();
							}
						})
					} else {
						this.$message({
							type: 'info',
							message: '请输入角色名称'
						});
					}
				}).catch(() => {});
			},
			editRole() {
				if(this.$refs.tree.getCheckedKeys(false).length <= 0){
					this.$message.warning('请至少选择一项权限');
					return
				}
				this.$confirm('确定权限设置无误？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}).then(res => {
					this.$request.admin.roleDistributeMenu({
						role_id: this.editForm.role_id,
						menu_list: this.$refs.tree.getCheckedKeys(false)
					}).then(res => {
						if (res&&res.data.code == 200) {
							this.$message.success('设置成功');
							this.getList();
						}
					})
				}).catch(() => {});
			},
			getList(page) {
				if(page){
					this.form.page = page;
				}
				this.loading = true;
				this.$request.admin.getRoleList(this.form).then(res => {
					this.loading = false;
					if (res&&res.data.code == 200) {
						this.tableData = res.data.content.data
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.page {
		width: 100%;
		padding: 20px;

		.top {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 20px;

			.el-form-item {
				margin-bottom: 0 !important;
			}
		}

		.input {
			width: 200px;
		}

		.cover_url {
			width: 140px;
			height: 80px;
			border-radius: 5px;
		}

		.pagination {
			display: flex;
			justify-content: flex-end;
		}

		.descriptions {
			margin-bottom: 20px;
		}
	}

	.table {
		height: calc(100vh - 320px);
		margin-top: 10px;
	}

	.btns {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.bedStyle {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;

		.bedTag {
			width: 120px;
			height: 40px;
			margin-bottom: 12px;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1px solid rgba(156, 156, 156, .2);
			border-radius: 5px;
			// box-shadow:  0 0 10px 1px rgba(156,156,156,.2);
		}
	}
</style>